<template>
  <div class="NewsItem-container">
    <lunbo></lunbo>
    <div class="news-header">
      <h5>{{NEWS_TYPE[newsInfo].name}}</h5>
    </div>

    <div v-if="!items.length"
         class="noData-tip">
      数据为空~
    </div>

    <div v-for="item in items" :key="item.index"
         class="new-item">

        <div class="new-title" @click="toNewsDetail(item.id)">{{item.title}}</div>
        
        <div class="new-content" v-html="item.describes"></div>
        <!-- 发布 -->
        <div class="new-author">
          <a>{{"发布人——"+item.username}}</a>
        </div>
        <!-- 时间 -->
        <!-- <div class="new-time">{{item.createTime.getFullYear() +'-'+ item.createTime.getMonth() +'-'+ item.createTime.getDate()}}</div> -->
    </div>

    <div class="news-page">
      <el-pagination
              background
              :page-size = 6
              @current-change = "handleCurrentChange"
              current-page.sync = "filterForm.Page"
              layout="total, prev, pager, next, jumper"
              :total="totalCount">
      </el-pagination>
    </div>

  </div>

</template>

<script>
  import axios from 'axios'
  //用NEWS_TYPE来选择商品分类标题 与 商品分类列表
  //通过name选择 标题
  //通过id  选择 列表
  const NEWS_TYPE = {
    movie:{
      name:'电影周边',
      id:'movie',
    },
    music:{
      name:'音乐周边',
      id:'music',
    },
    book:{
      name:'图书漫画',
      id:'book',
    }
  }
import lunbo from './lunbo'
export default {
    name:'newsItem',
    components:{
        lunbo
    },
    data() {
        return {
            items:[],//数据列表数组 
            NEWS_TYPE,//
            totalCount:0,//数据列表的总数
            filterForm:{
                type:'',//商品分类的type---NEWS_TYPE[newsinfo].id---相关联
                Page:1,//默认打开在第一页
                pageSize:6,//一页有6条news
            }
        };
    },
    computed:{
        //路由设置
        newsInfo(){
            //分割字符串 route.path '/'
            const paths = this.$route.path.split('/');
            //'/'后面的字符串
            return paths[paths.length - 1];
        }
    },
    //监听数据列表
    watch:{
        newsInfo(newVal){
            this.filterForm.type = this.NEWS_TYPE[newVal].id;
            this.getNewsList()
        }
    },
    //渲染
    mounted(){
      this.getNewsList();
    },
    methods:{
      //路径跳转为某个商品的详情
      toNewsDetail(id){
        this.$router.push({path:`news/id/${id}`});
      },
      //渲染数据列表
      getNewsList(){
          this.filterForm.type = this.NEWS_TYPE[this.newsInfo].id;
          axios.post('api/getNewsList',{...this.filterForm}).then(res =>{
            this.items = res.data;
            this.totalCount = res.data.length;
            //console.log(res.data)
          })
      },
      //跳转到某个页码
      handleCurrentChange(val){
        //将当前页码 赋值 到filterForm
        //this.filterForm.page = val;
        //再渲染当前页码的数据
        //this.getNewsList();
        console.log(val)
      }
    }
}
</script>

<style lang = "scss" scoped>
     .NewsItem-container{
       padding: 20px 50px;
       width: 100%;
       .news-header{
         border-bottom: 1px solid #ddd;
         h5{
           margin: 10px 0;
           height: 20px;
           line-height: 20px;
           font-size: 16px;
         }
       }
       .noData-tip{
         text-align: center;
         margin-top: 30px;
         font-size: 14px;
         color: #c2c2c2;
         min-height: 200px;
       }
       .new-item{
         margin-top: 15px;
         border-bottom: 1px solid #e0dada;
         padding: 10px 0 30px;
         .new-title{
           cursor: pointer;
           color: #212121;
           font-weight: 500;
           font-size: 18px;
           margin: 10px 0;
           overflow: hidden;
           text-overflow:ellipsis;
           white-space: nowrap;
         }
         .new-title:hover{
           color:#409EFF;
           font-weight: bold;
         }
         .new-content{
           color: #888;
           font-size: 13px;
           margin: 5px 0;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
           line-height: 1.5;
           max-height: 60px;
         }
         .new-author{
           float: left;
           color: #666;
           font-size: 13px;
           margin: 5px 0;
           color: #409EFF;
           font-weight: bold;
         }
         .new-time{
           margin-top: 5px;
           float: right;
           display: inline-block;
           color: #888;
           font-size: 13px;
         }
       }
       .news-page{
         margin: 30px 0;
         text-align: center;
       }
     }
</style>